<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E总管-产品介绍</title>
		<link rel="stylesheet" href="src/css/bootstrap.min.css" />
		<link rel="stylesheet" href="public/css/my_style.css" />
		<link rel="stylesheet" href="public/css/header.css" />
		<link rel="stylesheet" href="public/css/footer.css" />
		<link rel="stylesheet" href="css/product_intro.css" />
	</head>

	<body>
		<div id="app" v-cloak>
			<header class="my_flex container">
				<div></div>
				<div class="text-center">{{product_detail.ProductName}}</div>
				<div ><button style="width: auto;" class="cursor btn btn-base" v-if="product_detail.ModelID==4" @click="go_plan_book">计划书</button></div>
			</header>
			<div class="my_container">
				<div class="pdf" style="background-color: white;font-size: 0;">
					<img style="width: 100%;" v-for="item in product_detail.ProductIntroductions" :src="host+item" alt="" />
					<!--<iframe id="iframe" style="border: none;" v-if="src" v-bind:src="src | add_baseUrl" width="100%" height="100%" scroll="no"></iframe>-->
				</div>
			</div>
			<footer style="background-color: white;">
				<div class="my_container my_flex my_flex_around">
					<li class="cursor" @click="introduce">项目资料</li>
					<li class="cursor" @click.stop="playvideo">教学视频</li>
					<li class="cursor" @click="getSimilarProducts">同类比较</li>
				</div>				
			</footer>
			<loading></loading>
			<!--视频框-->
			<div class="modal my_modal fade" id="video"  tabindex="-1" role="dialog">
				<div class="modal-dialog" style="width:80%;top: 50%;max-width: 1000px;" role="document">
				    <div class="modal-content">
					    <div class="modal-body">
					    	<video width="100%"  height="" id="my_video"  controls="controls">
					    		<source v-bind:src="Video | add_baseUrl" type="video/mp4"></source>					    		
					    	</video>
					    </div>
				    </div>
			  	</div>
			</div>
			<!--提示框-->
			<div class="modal my_modal fade" id="alert" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-body">
						<p></p>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-base confirm" data-dismiss="modal">确 定</button>
				      </div>
				    </div>
			  	</div>
			</div>
			<!--支付ppt-->
			<div class="modal my_modal fade" id="pay_detail"  tabindex="-1" role="dialog">
				<div class="modal-dialog"  role="document">
				    <div class="modal-content">
					    <div class="modal-body text-center"><p style="font-size:20px;"></p>
					    </div>
					    <div class="modal-footer my_footer">
					        <button type="button" class="btn btn-default" data-toggle="modal" data-target="pay" data-dismiss="modal">取消</button>
					        <button type="button" v-if="infos.user.IsVip==0" @click="go_singed" class="btn btn-base wow" data-toggle="modal" data-target="pay" data-dismiss="modal">前往签约WOW</button>
					        <button type="button" class="btn btn-base" data-toggle="modal" data-target="pay" data-dismiss="modal" @click="pay_product_detail">确认</button>
					    </div>
				    </div>
			  	</div>
			</div>
			<!--视频支付-->
			<div class="modal my_modal fade" id="pay_video" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-body">
						<p></p>
				      </div>
				      <div class="modal-footer my_footer">
				      	<button type="button" class="btn btn-default cancel" data-dismiss="modal">取 消</button>
				        <button type="button" class="btn btn-base confirm" @click="pay_video" data-dismiss="modal">确 定</button>
				      </div>
				    </div>
			  	</div>
			</div>
			<!--同类产品-->
			<div class="product_list_detail" v-if="detail_show">
				<div class="module">
					<li class="title">
						同类产品
						<button type="button" style="width:auto;" class="btn btn-base back_list" @click="hide">返回列表</button>
					</li>					
					<!--推荐产品-->
					<div class="recommend module">
						<ul class="list">
							<li class="cursor my_flex my_flex_between" @click="go_other_product(item)" v-for="item in list_info">
								<span>{{item.ProductName}}</span> <i class="glyphicon glyphicon-menu-right"></i>
							</li>							
						</ul>
						<p v-if="list_info.length==0" style="text-align: center;font-size: 25px;padding: 10px 0;" class="">该分类下暂时没有其他产品，敬请期待。</p>
					</div>
				</div>
				<div class="cover"></div>
			</div>
			<!--没有签约-->
			<div class="modal my_modal fade" id="not_sign" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-body">
						<p>尊敬的用户，您目前的身份为【注册用户】,尚无权限观看本项目的信息，请在个人中心中点击"签约用户"并上传证件照，通过审核后，您将成为【签约用户】且享有观看项目信息权限</p>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn cancel" data-dismiss="modal">取 消</button>
				        <button type="button" class="btn btn-base confirm" @click="go_signed">确 定</button>
				      </div>
				    </div>
			  	</div>
			</div>
		</div>
		<script src="src/jquery.js"></script>
		<script src="src/vue.min.js"></script>
		<script src="src/js/jquery.nicescroll.js"></script>
		<script src="src/js/common-scripts.js"></script>
		<script src="public/js/comm.js"></script>
		<script src="src/js/bootstrap.min.js"></script>			
		<script src="public/js/header_bottom.js"></script>
		<script src="public/component/change_page.js"></script>
		<script src="js/product_intro.js"></script>
	</body>

</html>